<template>
    <h1>calss 绑定</h1>

    <p :class="{'active':isActive, 'text-danger': hasError}">class 样式绑定</p>
    <p :class="classObject">class 多对象绑定</p>
    <p :class=[activeClass,errorClass]>class 数组绑定</p>
    <p :class="[isActive ? activeClass : '', errorClass]">class 有条件数组绑定</p>
    <div :class="[{ [activeClass]: isActive }, errorClass]">数组对象嵌套</div>
</template>

<script>
export default{
    data(){
        return{
            isActive:false,
            hasError:true,
            classObject: {
                active: true,
                'text-danger': false
            },
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    }
}    
</script>

<style>
.active{
    color: aqua;
    font-size: 20px;
}
.text-danger{
    color: red;
    
}
</style>